<template>
	<div class="dropdown" ref="dropdownRef">
		<a href="#" class="btn btn-outline-light my-2 dropdown-toggle" @click.prevent="toggleOpen">
			{{title}}
		</a>
		<ul class="dropdown-menu" style="display:block" v-show="isOpen">
			<drop-down-item><a href="#">新建文章</a></drop-down-item>
			<drop-down-item><a href="#">编辑资料</a></drop-down-item>
			<drop-down-item><a href="#">退出登录</a></drop-down-item>
		</ul>
	</div>
</template>

<script lang="ts">
	import { defineComponent, ref, watch } from 'vue'
	import DropDownItem from './DropDownItem.vue'
	import useClickOutSide from '../hooks/useClickOutside'

	export default defineComponent({
	  	name: 'DropDown',
	  	components: { DropDownItem },
	  	props: {
	  		title: {
	  			type: String,
	  			required: true
	  		}
	  	},
	  	setup() {
	  		const isOpen = ref<boolean>(false)
	  		const dropdownRef = ref<null | HTMLElement>(null)
	  		const isClickOutside = useClickOutSide(dropdownRef)
	  		const toggleOpen = () => {
	  			isOpen.value = !isOpen.value
	  		}
	  		watch(isClickOutside, () => {
	  			if (isClickOutside.value && isOpen.value) {
	  				isOpen.value = false
	  			}
	  		})
	  		return {
	  			isOpen,
	  			toggleOpen,
	  			dropdownRef
	  		}
	  	}
	})
</script>
